<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>가로 방향 예제</title>
<meta name="class-lists" content="jindo.Accordion"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="가로 방향의 디자인을 가지고 있는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	#panel { float:left; }
	#panel .accordion-block { position:relative; float:left; width:20px; height:200px; margin:1px; border:1px solid black; overflow:hidden;}
	#panel dt { float:left; width:20px; height:200px; background-color:#eeeeee; }
	#panel dd { position:absolute; margin:0; left:20px; width:150px; height:200px; }
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<!--
	레이어의 구조는 .block .head .body .handler 이렇게 4가지 요소로 구분됩니다.
	개별 단위인 block은 head와 body로 구성되어야하고
	handler는 마우스의 이벤트를 처리하는 엘리먼트입니다.
	
	기본동작은 overflow:hidden 된 block의 사이즈를 조절함으로써 body의 내용을 보여주고 숨깁니다.
	block이 최소화 되었을때의 사이즈는 head의 사이즈,
	block이 최대화 되었을때의 사이즈는 head+body의 사이즈가 됩니다.
	-->
	<div id="panel">
		<!-- 초기화면에 확장된 모습으로 보여주고 싶은경우 block의 사이즈를 head+body의 사이즈로 지정합니다. -->
		<dl class="accordion-block" style="width:170px;">
			<dt><a href="#" onclick="return false" class="accordion-handler">1</a></dt>
			<dd>내용1</dd>
		</dl>
		<dl class="accordion-block">
			<dt><a href="#" onclick="return false" class="accordion-handler">2</a></dt>
			<dd>내용2</dd>
		</dl>
		<dl class="accordion-block">
			<dt><a href="#" onclick="return false" class="accordion-handler">3</a></dt>
			<dd>내용3</dd>
		</dl>
		<dl class="accordion-block">
			<dt><a href="#" onclick="return false" class="accordion-handler">4</a></dt>
			<dd>내용4</dd>
		</dl>
		<dl class="accordion-block">
			<dt><a href="#" onclick="return false" class="accordion-handler">5</a></dt>
			<dd>내용5</dd>
		</dl>
	</div>
	<div style="clear:both;">
	<a href="#" onclick="oAccordion.contractAll()">전체축소</a>
	</div>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Timer.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Effect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Transition.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Accordion.js"></script>
<script type="text/javascript">
	var oAccordion = new jindo.Accordion("panel", { 
		sDirection : "horizontal" 
	});
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>